<template>
  <div class="space-y-2">
    <div
      v-for="(item, index) in transactions"
      :key="index"
      class="bg-gray-800/60 rounded p-2 border border-gray-700 hover:border-gray-600 transition-all"
    >
      <div class="flex justify-between items-center">
        <div>
          <div class="font-medium text-sm">{{ item.product }}</div>
          <div class="text-xs text-gray-400 mt-0.5">
            <span>订单 #{{ item.orderId }}</span>
            <span class="mx-1">•</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
        <div class="text-right">
          <div class="font-semibold text-green-400">{{ item.amount }}</div>
          <div class="text-xs text-gray-400 mt-0.5">{{ item.location }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  // 模拟交易数据
  const transactions = ref([
    {
      product: '智能手表 Pro',
      orderId: '852456',
      amount: '¥1,299',
      time: '10:24',
      location: '北京'
    },
    { product: '无线耳机', orderId: '852455', amount: '¥799', time: '10:22', location: '上海' },
    { product: '智能手机 X', orderId: '852454', amount: '¥5,999', time: '10:20', location: '广州' },
    { product: '平板电脑', orderId: '852453', amount: '¥3,499', time: '10:18', location: '深圳' },
    { product: '智能音箱', orderId: '852452', amount: '¥399', time: '10:15', location: '杭州' }
  ])

  // 模拟实时更新
  onMounted(() => {
    const interval = setInterval(() => {
      // 随机生成新交易
      const products = [
        '智能手表 Pro',
        '无线耳机',
        '智能手机 X',
        '平板电脑',
        '智能音箱',
        '笔记本电脑',
        '智能电视'
      ]
      const locations = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京']
      const randomProduct = products[Math.floor(Math.random() * products.length)]
      const randomLocation = locations[Math.floor(Math.random() * locations.length)]
      const randomAmount = Math.floor(Math.random() * 9000) + 1000
      const lastOrderId = parseInt(transactions.value[0].orderId) + 1

      // 获取当前时间
      const now = new Date()
      const timeStr = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`

      // 添加新交易到顶部
      transactions.value.unshift({
        product: randomProduct,
        orderId: lastOrderId.toString(),
        amount: `¥${randomAmount.toLocaleString()}`,
        time: timeStr,
        location: randomLocation
      })

      // 保持列表长度
      if (transactions.value.length > 8) {
        transactions.value.pop()
      }
    }, 5000)

    // 清理函数
    return () => clearInterval(interval)
  })
</script>
